<template>
    <div class="page">

        <div class="list">
            <span class="input-title">角度</span>
            <input class="my-input" v-model="input1" type="text" placeholder="请输入角度" @input="getData()">
        </div>
        <div class="list">
            <span class="input-title">距离</span>
            <input class="my-input" v-model="input3" type="text" placeholder="请输入距离" @input="getData()">
        </div>
        <div class="list">
            <span class="input-title">风速</span>
            <input class="my-input" v-model="input2" type="text" placeholder="请输入风速" @input="getData()">
        </div>

        <div  class="list">
            <span>角度：{{dataJiao}}</span>
            <span>力量：{{dataLi}}</span>
        </div>

    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
    name: "couponLink",
    components: {},
})
export default class extends Vue {
    input1 = "20";
    input2 = "0";
    input3 = "5";
    dataJiao = 0;
    dataLi = 0;
    arr20 = [5, 8, 16, 23, 28, 33, 37, 41, 45, 48, 51, 54, 57, 60, 63, 65, 68, 70, 72, 75, 77];
    arr65 = [5, 11, 19, 26, 31, 35, 39, 43, 47, 50, 54, 57, 60, 63, 66, 69, 72, 74, 77, 80, 82];

    getData() {
        if (this.input1 === "20") {
            this.dataJiao = 20;
            this.dataLi = this.arr20[Number(this.input3)];
        }
        if ((this.input1 === "65")) {
            this.dataJiao = 65 + Number(this.input2) * 2;
            this.dataLi = this.arr65[Number(this.input3)];
        }
        if ((this.input1 === "90")) {
            this.dataJiao = 90 + Number(this.input2) * 2;
            this.dataLi = 95
        }
    }
    mounted() {
        this.getData();
    }
}
</script>
<style lang="scss">
.page{
    padding: 20px;
}
.list{
    margin-bottom: 10px;
}
</style>
